{% extends 'base_templates/_page_layout.html' %}
{% load notification_tags %}

{% block css %}
    <style>
        .mx-box {
            max-height: 600px;
            min-height: 380px;
        }
        .nav {
            /*display: -ms-flexbox;*/
            display: block;
            /*-ms-flex-wrap: wrap;*/
            /*flex-wrap: wrap;*/
            /*padding-left: 0;*/
            margin-bottom: 0;
            list-style: none;
        }

        .tabs-vertical-env .nav.click_properties {
          /*display: table-cell;*/
          /*min-width: 120px;*/
          /*vertical-align: top;*/
          /*width: 150px;*/
        }

        .tabs-vertical-env .nav.click_properties li > a {
          color: #2a3142;
          white-space: nowrap;
          font-weight: 600;
          border-radius: 2px;
        }

        .tabs-vertical-env .nav.click_properties li > a.active {
          background-color: #ebf2f9;
          /*border: 0;*/
          opacity:0.8;
          border:1px solid #2494be;
          color: #ffffff;
        }
        .screen {
            width: 100%;
            /*height: 700px;*/
            /*overflow: hidden;*/
        }
        .notify-icon {
            float: left;
            height: 36px;
            width: 36px;
            line-height: 36px;
            text-align: center;
            margin-right: 10px;
            border-radius: 50%;
            color: #ffffff;
        }
    </style>
    <!-- DataTables -->
    <link href="/static/plugins/minton/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="/static/plugins/minton/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <!-- Responsive datatable examples -->
    <link href="/static/plugins/minton/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block title %}

    <!-- Page-Title -->
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <h4 class="page-title">通知管理</h4>
                <ol class="breadcrumb float-right">
                    <li class="breadcrumb-item"><a href="#">通知管理</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

{% endblock %}

{% block conent %}

<div class="row screen">
    <div class="col-12">
        <div class="card-box">
            <h4 class="m-t-0 header-title">通知管理</h4>
            <p class="text-muted m-b-30 font-13">
                带有 <code>红色标识</code> 的标志表示未读消息数量，阅读后可取消未阅读标志.
            </p>
            <div class="row">
                <div class="col-lg-4">
                    <div class="card-box">
                        <h4 class="m-t-0 m-b-20 header-title ">
                            <b>未读数量 </b>
                            <span class="badge badge-pink noti-icon-badge not-read-number">{{ not_read_str }}</span>
                        </h4>

                        <div class="inbox-widget nicescroll mx-box" tabindex="5000" style="overflow: hidden; outline: none;">
                            <div class="tabs-vertical-env">
                                <ul class="nav click_properties">
                                    {% SetNotificationTitle data GetParameter%}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="card-box">
                        <div class="tab-content table_body">
                            {% SetNotificationBody data GetParameter%}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# <div class="row"> #}
    {# <nav class="navbar navbar-default"> #}
      {# <div class="container-fluid"> #}
        {# <div class="navbar-header"> #}
          {# <a class="navbar-brand" href="#"> #}
            {# <img alt="Brand" width="20" height="20" src="https://mirror.shileizcc.com/Other/bootscript_logo.png"> #}
          {# </a> #}
        {# </div> #}
      {# </div> #}
    {# </nav> #}
{# </div> #}
{% endblock %}

{% block js %}
<script src="/static/plugins/minton/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/minton/plugins/datatables/dataTables.bootstrap4.min.js"></script>
<script>
    $(function(){
        ManualGetValue();
        $(".mx-box")[0].scrollTop = 25 * {{ location_num }}
    });

    const capitalize = ([first,...rest], lowerRest = false) =>
    first.toUpperCase() + (lowerRest ? rest.join('').toLowerCase() : rest.join(''));
    
    function AutomaticGetValue() {
        if(getUrlParam("view")){
            var _auth = getUrlParam("view");
            $(".click_properties").find('a').each(function () {
                if($(this).attr("value") == _auth){
                    $(this).attr("class", "badge badge-warning");
                    $(this).text("已读");
                }
            })
            postData = {"auth": _auth}
            $.ajax({
                'url': '',
                'type': 'POST',
                'dataType': 'JSON',
                'data': postData,
                success: function(arg){
                    var _body = '<div class="tab-pane active show" id="' + arg.auth + '"><h4 class="m-t-0 font-18"><b>' + arg.title + '</b></h4><hr><div class="media m-b-30"><div class="media-body"><span class="media-meta pull-right">'+ arg.trigger_time +'</span><h4 class="text-primary font-16 m-0">'+ capitalize(arg.user) +'</h4><small class="text-muted">From: '+ arg.email +'</small></div></div><p><b>Hi ~</b></p><p>'+ arg.describe +'</p>'

                    $(".table_body").html(_body);
                    $(".not-read-number").each(function(){
                        var oldNum = $(this).text();
                        if(oldNum <= 0){
                            var newNum = 0;
                        }else{
                            var newNum = Number(oldNum) - 1;
                        }
                        $(this).text(newNum);
                    })
                }
            })
        }
    }

    // Get Value
    function ManualGetValue() {
        $(".nav-item").on("click", function(e){
            var stateObject = {};
            var title = "ResumeCRM";
            var newUrl = GetUrlRelativePath();
            var newParameter = "?" + "view=";
            var _auth = $(this).children().attr("value");
            $(this).find('span').each(function(){
                $(this).attr("class", "badge badge-warning");
                $(this).text("已读");
            })
            postData = {"auth": _auth}
            $.ajax({
                'url': '',
                'type': 'POST',
                'dataType': 'JSON',
                'data': postData,
                success: function(arg){
                    history.pushState(stateObject, title, newUrl + newParameter + _auth);
                    var _body = '<div class="tab-pane active show" id="' + arg.auth + '"><h4 class="m-t-0 font-18"><b>' + arg.title + '</b></h4><hr><div class="media m-b-30"><div class="media-body"><span class="media-meta pull-right">'+ arg.trigger_time +'</span><h4 class="text-primary font-16 m-0">'+ capitalize(arg.user) +'</h4><small class="text-muted">From: '+ arg.email +'</small></div></div><p><b>Hi ~</b></p><p>'+ arg.describe +'</p>'

                    $(".table_body").html(_body);
                    // $(".not-read-number").each(function(){
                    //     var oldNum = $(this).text();
                    //     if(oldNum <= 0){
                    //         var newNum = 0;
                    //     }else{
                    //         var newNum = Number(oldNum) - 1;
                    //     }
                    //     $(this).text(newNum);
                    // })
                }
            })
        });
    }
    // 获取 Url 参数
    function GetUrlAllPara() {
        var url = document.location.toString();
        var arrUrl = url.split("?");

        var para = arrUrl[1];
        return para;
    }

    // 获取 Url 相对路径
    function GetUrlRelativePath(){
        var url = document.location.toString();
        var arrUrl = url.split("//");

        var start = arrUrl[1].indexOf("/");
        var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符

        if(relUrl.indexOf("?") != -1){
            relUrl = relUrl.split("?")[0];
        }
        return relUrl;
    }
    // 获取当前 url 中的相应参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>
{% endblock %}